<template>
	<view >
		<!-- 头部 -->
		<topTabbar :detail="shopcar" @back="back"></topTabbar>
		<view class="flex padding" v-for="(item,index) in cartList" :key="item.id+'-'+item.idx">
			<view class="flex align-center">
				<text class="iconfont icon-gouxuan margin-right" :class="item.ischeck?'gouxuan':''"
					@click="handleCheck(index)"></text>
				<image class="poster margin-right" :src="item.img" mode=""></image>
			</view>
			<view class="flex justify-between info">
				<view class="">
					{{item.name}}
					<view class="margin-tb-xs">{{item.french}}</view>
					￥{{cartList[index].list[columnsidx].price * cartList[index].num}}
				</view>
				<view class="flex flex-direction align-end">
					<view @click="handleEdit(index)" class="edit margin-bottom-xs">
						<text class="iconfont icon-bianji"></text>
					</view>
					{{cartList[index].bang1.substring(0,2)}}
					X
					{{item.num}}
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-overlay :show="show"  @click="cancel">
			<view class="warp">
				<view class="bg-white  margin cover-cont" @tap.stop>
					<view class="padding">
						<view class="flex">
							<image class="poster margin-right " mode=""></image>

							<view class="flex justify-between info margin-tb-xs">
								<view class="">
									{{cartList[cartidx].name}}
									<view class="margin-tb-xs">{{cartList[cartidx].french}}</view>
									￥{{cartList[cartidx].list[columnsidx].price}}
								</view>
							</view>
						</view>

						<view class="flex justify-between padding-tb u-border-bottom">
							<view class="">
								规格选择
							</view>

							<view>
								<text @click="showlist = true" >{{cartList[cartidx].bang}}</text>
								<text class="iconfont icon-xiala"></text>
							</view>


						</view>

						<view class="flex justify-between padding-tb-sm u-border-bottom align-center">
							<view class="">
								数量选择
							</view>
							<u-number-box integer :value="num"  :min='1' button-size="26" longPress bgColor="orange" @change="handlenum" ></u-number-box>


						</view>

					</view>

					<view class="flex">
						<button type="default" class="cu-btn bg-brown lg " @click="cancel">取消</button>
						<button type="default" class="cu-btn bg-yellow lg" @click="ok">确认</button>
					</view>

				</view>
			</view>
		</u-overlay>


		<!-- closeOnClickOverlay,closeOnClickAction 这两个的用处就是用完后调用一下@close这个函数一次 -->

<!--picker弹窗 -->
		<u-picker :show="showlist"  :columns="columns" :closeOnClickOverlay="true"@close="close"  @cancel="close" @confirm="confirm"
		></u-picker>


<!-- 底部 -->
		<view class="fixed bg-white flex fixeds">
			<view class="flex flex-sub align-center padding">
				<text class="iconfont icon-gouxuan margin-right-xs" :class="allinfo.allCheck?'gouxuan':''"
					@click="handleAllCheck(allinfo.allCheck)"></text>
				全选
				<view class="margin-left-xs">
					￥{{allinfo.allPrice}}
				</view>
			</view>
			<view class="bg-yellow padding text-center">
				立即结算
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				shopcar: "购物车",
				show: false,
				title: '标题',
				showlist: false,
				cartidx: 0,
				columns: [],
				columnsidx:0,
				num:7,

			};
		},
		computed: {
			...mapState({
				cartList: state => state.cart.cartList,
			}),
			...mapGetters({
				allinfo: 'cart/allinfo'
			})
		},
		methods: {
			...mapMutations({
				handleCheck: 'cart/cartCheckMut',
				handleAllCheck: 'cart/cartAllCheckMut',
			}),
			back() {
				uni.navigateBack({

				})
			},
			handleEdit(idx) {
			
				// console.log(idx);
				this.columns = []
				this.cartidx = idx
				this.num = this.cartList[this.cartidx].num
				// 	console.log(this.cartList[this.cartidx].num)
				console.log(this.cartidx,this.columnsidx);
				this.show = true
				var list,newlist = [];

				list = this.cartList[this.cartidx].list
				//这边是把cartlist的数据放进picker里面,写的很乱，以后看也许自己都看不懂，反正功能实现就好了
				list.map(item => item.list= `${item.spec}--${item.edible}`)
				this.columnsidx = 0
				console.log(list);
				list.forEach(item=>newlist.push(item.list))
				this.columns.push(newlist)
				console.log(this.columns);
			
			},

			close() {
				// console.log(1);
				this.showlist = false
			},
			confirm(index){
				// console.log(index.indexs[0]);
				this.columnsidx = index.indexs[0]
				// console.log(this.columnsidx);
				let idx = this.cartidx
				let value = index.value[0]
				
				console.log(this.cartList[this.cartidx].list[this.columnsidx].price);
				// console.log(idx,index.value);
					
				this.$store.commit("cart/cartListCheckMut",{idx,value})
				
				this.close()
			},
			cancel(){
				// let {cartidx} = this
				// this.$store.commit('cart/cancelBang',cartidx)
				this.show=false
			},
			ok(){
				let {cartidx,num} = this
				console.log(num);
				this.$store.commit('cart/confirmBang',{cartidx,num})
				this.show=false
			},
			handlenum(res){
			
				this.num = res.value
				console.log(this.num);
			}
			
		},
		
	}
</script>

<style lang="scss">
	.cu-btn {
		width: 50%;
		color: white;
	}

	page {
		padding-bottom: 100upx;
	}

	.poster {
		width: 180upx;
		height: 180upx;
		background-color: #d8d8d8;
	}

	.info {
		width: 60%;

		.edit {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			background-color: #e6e6e6;
			text-align: center;
			line-height: 80upx;

		}
	}

	.icon-gouxuan {
		color: #000000;
	}

	.gouxuan {
		color: #ff0004;
		// background-color:  #000000;
	}

	.bg-yellow {
		color: #000000;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.cover-cont {
		position: absolute;
		top: 50%;
		width: 690upx;
		transform: translateY(-50%);

	}
</style>
